<template>
    <div :id="'base-line'+times" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import * as echarts from 'echarts/core';
import { GridComponent, type GridComponentOption, 
    TooltipComponent,type TooltipComponentOption,
    MarkPointComponent, type MarkPointComponentOption
} from 'echarts/components';
import { LineChart, type LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, TooltipComponent,
MarkPointComponent
]);

type EChartsOption = echarts.ComposeOption<
  GridComponentOption | LineSeriesOption | TooltipComponentOption | MarkPointComponentOption
>;
let props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
const times = new Date().getTime()
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    var chartDom = document.getElementById('base-line'+times)!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: '#23c2be',
            borderColor: '#23c2be', 
            textStyle: {
                color: '#ffffff',
                fontSize: 14
            },
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                },
            },
            valueFormatter: function (value) {
                return '价格：'+value;
            }
        },
        grid: {
            top: 40,
            left: '4%',
            right: '6%',
            bottom: 50,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: { show: true, color: '#c3c6ce' },
            data: props.data.xAxisDataList
        },
        yAxis: {
            type: 'value',
            axisLabel: { show: true, color: '#c3c6ce' },
            splitLine:{show: true, lineStyle:{color: '#19485d'}},
            axisLine: { show: true },
            axisTick: { show: true },
        },
        series: [
            {
                data: props.data.seriesDataList,
                type: 'line',
                smooth: true,
                color: {
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: '#22c1be' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#63eab6' // 100% 处的颜色
                    }],
                    global: false
                },
                markPoint: {
                    symbol: 'emptyCircle',
                    symbolSize: 16,
                    // symbolOffset: [0, -10],
                    label: { color: '#888888', fontSize: 16 },
                    data: [ { type: 'max'}, { type: 'min'} ],
                    itemStyle: { color: '#22c1be' },
                    
                }
            }
        ]
    };

    option && myChart.setOption(option);

    window.addEventListener('resize', () => {
        myChart.resize()
    })
    // myChart.getZr().on('click', function(event) {
    //     // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
    //     if (!event.target) {
    //         // 点击在了空白处，做些什么。
    //     }
    // });

    // myChart.on('click', function(event) {
    // // 该监听器正在监听一个`echarts 事件`。
    // });
})
</script>

<style scope>
</style>